const selectAll = document.getElementById("selectAll");
const checkboxes = document.querySelectorAll("input[name='select']");
const deleteLinks = document.querySelectorAll('.delete');
const addBtu = document.querySelectorAll('.count-container button:nth-of-type(2)');
const reduceBtu = document.querySelectorAll('.count-container button:nth-of-type(1)');
const selectAllFooter = document.getElementById('selectAllFooter');
const deleteAllBtu = document.getElementsByClassName('deleteAll')[0]



selectAll.addEventListener('change', () => {
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
        selectAllFooter.checked = selectAll.checked;
    })
})

selectAllFooter.addEventListener('change', () => {
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAllFooter.checked;
        selectAll.checked = selectAllFooter.checked;
    })
})


checkboxes.forEach(check => {
    check.addEventListener('change', () => {
        const allChecked = [...checkboxes].every(checkbox => checkbox.checked);
        selectAll.checked = allChecked;
        selectAllFooter.checked = allChecked;
    })
})

deleteLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault(); // 阻止默认行为
        if (confirm(' 确定要删除该商品吗？')) {
            link.closest('tr').remove();
        }
    })
})

addBtu.forEach(item => {
    item.addEventListener('click', () => {
        let count = parseInt(item.parentNode.querySelector('input').value);
        item.parentNode.querySelector('input').value = count + 1;

        const priceSpan = item.parentNode.parentNode.nextElementSibling.querySelector('#price');
        const money = item.parentNode.parentNode.previousElementSibling.querySelector('span').innerText;
        priceSpan.innerText = (money * (count + 1)).toFixed(2);

    })
})
reduceBtu.forEach(item => {
    item.addEventListener('click', () => {
        let count = parseInt(item.parentNode.querySelector('input').value);
        if (count > 1) {
            item.parentNode.querySelector('input').value = count - 1;
            const priceSpan = item.parentNode.parentNode.nextElementSibling.querySelector('#price');
            const money = item.parentNode.parentNode.previousElementSibling.querySelector('span').innerText;
            priceSpan.innerText = (money * (count - 1)).toFixed(2);
        }
    })
})

deleteAllBtu.addEventListener('click', () => {
    if (confirm('确定要删除全部吗？')) {
        deleteLinks.forEach(link => {
            link.closest('tr').remove()

        })
    }
})

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.count-container').forEach(container => {
        const count = parseInt(container.querySelector('input').value);
        const priceSpan = container.parentNode.nextElementSibling.querySelector('#price');
        const money = container.parentNode.previousElementSibling.querySelector('span').innerText;
        priceSpan.innerText = (money * count).toFixed(2);
        document.getElementById('footer').querySelectorAll('td')[4].innerHTML = '总计：￥<span id="price">0.00</span>';
    });
})

window.addEventListener('load', () => {
    const header = document.getElementById('header');
    const footer = document.getElementById('footer');
    const headerThs = header.querySelectorAll('th');
    const footerThs = footer.querySelectorAll('td');
    headerThs.forEach((th, index) => {
        th.style.width = th.clientWidth + 'px';
        footerThs[index].style.width = th.style.width;
    })
})
//总计
function totalPrice() {
    const priceSpans = document.querySelectorAll('#price');
    const checkboxes = header.querySelectorAll("input[name='select']");
    let total = 0;
    const allChecked = [...checkboxes].every(checkbox => checkbox.checked);

    if(!allChecked){
        document.getElementById('footer').querySelectorAll('td')[4].innerHTML = '总计：￥<span id="price">0.00</span>';
    }

    checkboxes.forEach((checkbox, index) => {
        if (checkbox.checked) {
            total += parseFloat(priceSpans[index].innerText);
            document.getElementById('footer').querySelectorAll('td')[4].innerHTML = '总计：￥<span id="price">' + total.toFixed(2) + '</span>';
        }
    })
}

document.addEventListener('change', totalPrice);
document.addEventListener('click', totalPrice);

